<template>
  <div id="rebuy">
    <van-row class="rebuy-centenr">
      <van-col span="24">
        <van-nav-bar title="评论" left-arrow @click-left="onClickLeft" />
      </van-col>
      <div class="w">
        <van-col span="24" class="centenr-add-img">
          <p>添加图片</p>
          <van-uploader v-model="fileList" multiple :max-count="3" />
        </van-col>
        <van-col span="24" v-for="(item, index) in GoodsDataList" :key="index" class="Score">
          <van-col span="2">
            <div class="div">
              <img :src="item.picUrl" alt="" />
            </div>
          </van-col>
          <van-col span="7" class="text">
            <span>综合评分</span>
          </van-col>
          <van-col span="15">
            <span><van-rate v-model="value" :size="25" color="#ffd21e" void-icon="star" void-color="#eee"/></span>
          </van-col>
        </van-col>
      </div>
      <van-col class="description w">
        <span class="description-span">猜你想说</span>
        <div class="comments">
          <span>性价比超高</span>
          <span>味道纯正</span>
          <span>东西很不错</span>
        </div>
        <van-field v-model="message" rows="2" autosize type="textarea" maxlength="50" placeholder="多多描述商品和使用感受，更受欢迎哦" show-word-limit />
      </van-col>
      <van-col span="24" class="btn w">
        <van-button @click="onSubmitRebuy" type="primary" color="linear-gradient(to right, #ff6034, #ee0a24)" block>提交评论</van-button>
      </van-col>
    </van-row>
  </div>
</template>
<script>
import { Toast } from 'vant'
export default {
  name,
  data() {
    return {
      fileList: [],
      GoodsDataList: '',
      value: 5,
      message: ''
    }
  },
  mounted() {
    this.orderGoodsId = this.$store.state.RebuyItem.id
    this.GoodsDataList = this.$store.state.RebuyItem
    console.log(this.$store.state.RebuyItem)
  },
  methods: {
    onClickLeft() {
      this.$router.back()
    },
    onSubmitRebuy() {
      // 集中订单的id
      var promiseArr = []
      this.GoodsDataList.forEach(element => {
        var fileImgArr = []
        this.fileList.forEach(element => {
          fileImgArr.push(element.content)
        })
        // 封装 每次评论的 请求
        var promise = new Promise((resolve, reject) => {
          let param = {
            orderGoodsId: element.id, //订单中商品id
            content: this.message, //评价内容
            star: this.value, //星级 0~5
            hasPicture: true, //是否有图片
            filePath: fileImgArr //图片的base64数组（图片大小<5M，格式jpg/jpeg/png,最多3张）（没有图片则传空数组）
          }
          console.log(param)

          this.$post('comment/post', param).then(result => {
            console.log(result)
            resolve()
          })
        })
        // 把每次的 promise 存到一个数组
        promiseArr.push(promise)
      })
      // 当封装的 全部执行完才会这些这个
      Promise.all(promiseArr).then(res => {
        Toast.success('评论成功')
        this.$router.back()
      })
    }
  }
}
</script>
<style lang="less" scoped>
.rebuy-centenr {
  .centenr-add-img {
    text-align: center;
    .van-uploader {
      text-align: center;
    }
    p {
      line-height: 0.5rem;
    }
  }
  .Score {
    width: 100%;
    border-bottom: 1px solid #f1f3f4;
    .text {
      span {
        margin-left: 0.3rem;
        font-size: 0.14rem;
      }
    }

    img {
      width: 50px;
      background-color: #f1f3f4;
    }
    span {
      line-height: 0.5rem;
    }
  }
  .description {
    line-height: 0.4rem;
    .description-span {
      font-size: 0.14rem;
    }
    .comments {
      float: right;
      margin-left: 0.15rem;
      span {
        padding: 0.05rem 0.08rem;
        font-size: 0.1rem;
        border-radius: 0.2rem;
        border: 0.01rem solid #d6d4d4;
        opacity: 0.8;
        margin-left: 0.15rem;
      }
    }
  }
  .btn {
    margin-top: 0.3rem;
  }
}
</style>
